<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<body>
<nav class="navgation">
    <ul>
        <li><a class = "more" href = "#">更多产品</a></li>
        <li>
            <a class = "thin set" href = "#">设置</a>
            <ul >
                <li><a href = "#">搜索设置</a></li>
                <li><a href = "#">高级搜索</a></li>
                <li><a href = "#">关闭预测</a></li>
                <li><a href = "#">搜索历史</a></li>
            </ul>
        </li>
        <li><a class = "thin" href = "#">登录</a></li>
        <li><a class = "bold" href = "#">贴吧</a></li>
        <li><a class = "bold" href = "#">视频</a></li>
        <li><a class = "bold" href = "#">地图</a></li>
        <li><a class = "bold" href = "#">hao123</a></li>
        <li><a class = "bold" href = "#">新闻</a></li>
        <li><a class = "bold" href="#" >糯米</a></li>
    </ul>
</nav>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 100%;
    }
    /*定义导航大小*/
    nav{
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #ebebeb;
    }
    /*一级菜单*/
    nav ul li{
        float:right;
        font-size: 18px;
        line-height: 40px;
        padding-left: 20px;
        list-style-type: none;
        position: relative;
    }
    /*二级菜单清除浮动*/
    nav ul li:hover ul{
        display: block;
        position: absolute;
    }
    /*鼠标没有滑过时不显示二级菜单*/
    nav ul li ul {
        display: none;
    }
    nav ul li ul li{
        padding: 0px;
      width: 100px;
    }
    /*滑过时显示二级菜单*/
    nav ul li a.set:hover ul{
        width: 200px;
        display: block;
        position: absolute;
    }
</style>
</html>
